<template>
	<!-- 全国巡剪 -->
	<view class="xunjian-wrapper">
		<MyNavbar title="全国巡剪" ></MyNavbar>
		
		<div class="base-box">
			<u-cell title="全国巡剪介绍">
			</u-cell>
			<div style="margin-top: 24rpx;">
				我没团队噢，拍摄、剪辑、所以这些都是我自己在弄，我精力有限，视频剪不过来了，所以需要招剪辑，巡剪肯定也需要摄影师噢，可以跟我全国各地跑的那种。因为店里还有一群相信我的小伙伴，我要把他们安顿好了再出发。另外，还需要10名优秀的发型师，和5名学徒。
			</div>
		</div>
		
		<div class="base-box">
			<u-cell title="当前巡剪城市">
			</u-cell>
			<div style="margin-top: 24rpx;">
				<u-cell :border="false" >
					<div slot="label">
						<span>当前城市：暂未开始</span>
					</div>
					<div slot="right-icon">
						
					</div>
				</u-cell>
				<u-cell :border="false" >
					<div slot="label">
						<span>下一站：南宁 (编的)</span>
					</div>
					<div slot="right-icon">
						2022-02-20 至 20日
					</div>
				</u-cell>
			</div>
		</div>
		
		<div class="base-box">
			<u-cell title="城市投票排名">
				<div slot="right-icon">
					<u-button type="primary" text="添加城市" @click="onClickAddCity"/>
				</div>
			</u-cell>
			<div ref="uReadMore" style="margin-top: 24rpx;" closeText="展开更多" showHeight="400" >
				<u-cell 
					v-for="(item,index) in cityList" :border="false" 
					:key="item.value" is-link @tap="cityVoting(item)">
					<div slot="label">
						<span style="font-weight: bold;font-size: 42rpx;margin-right: 12rpx;">{{index+1}}.</span>
						<span>{{item.value}}</span>
					</div>
					<div slot="right-icon">
						{{item.score}} 票
						<u-button type="primary" size="mini" text="点击投票" style="display: inline;margin-left: 12px;"></u-button>
					</div>
				</u-cell>
			</div>
		</div>
		
		
		<!-- 手动添加城市 -->
		<div>
			<u-modal 
				:show="showAddCity" ref="uModal" showCancelButton 
				@close="showAddCity=false" @cancel="showAddCity=false"
				:asyncClose="false" @confirm="onConfirmAddCity"
			>
				<u-input v-model.trim="inputCity" placeholder="城市名称"/>
			</u-modal>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityListKey: 'ckey',
				// 城市列表 排名
				cityList: [],
				showAddCity: false,
				inputCity: '',
			}
		},
		onLoad() {
			this.findCityList();
		},
		mounted() {
			
		},
		methods: {
			// 获取城市列表
			findCityList(){
				this.$api.sysArea.cityList().then(({data})=>{
					this.cityList = data;
				});
			},
			// 点击添加城市
			onClickAddCity(){
				this.showAddCity = true;
			},
			onConfirmAddCity(){
				let {inputCity} = this;
				console.log("手动投票给：", inputCity);
				if (!inputCity) {
					this.$utils.showToast("城市名必填");
					return;
				}
				inputCity = inputCity.trim();
				this.$api.sysArea.cityVoting({cityName: inputCity}).then(({data})=>{
					this.showAddCity = false;
					this.$utils.showSuccess("投票成功");
					setTimeout(()=>{
						this.findCityList();
					}, 1000);
				}).catch(e=>{
					this.showAddCity = false;
				});
			},
			// 投票
			cityVoting(item){
				console.log("点击投票：", item);
				uni.showModal({
					title: "给 " + item.value +" 投1票",
					success: (res)=>{
						if (res.confirm === true) {
							let value = item.value;
							console.log("确定投票给：", value);
							if (!value) {
								this.$utils.showToast("城市名必填");
								return;
							}
							this.$api.sysArea.cityVoting({cityName: value}).then(({data})=>{
								this.$utils.showSuccess("投票成功");
								setTimeout(()=>{
									this.findCityList();
								}, 1000);
							});
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.xunjian-wrapper{
		padding-bottom: 50rpx;
	}
</style>
